<template>
	<view>
		<view class="" v-if="isRender">
			<view class="progress">{{info.status_text}}</view>
			<view class="section">
				<view class="receive-info">
					<u-icon class="icon" size="40" name="map-fill"></u-icon>
					<view class="info">
						<text class="title">{{info.receive_name}}    {{info.receive_mobile}}</text>
						<view class="address">{{info.receive_address}}</view>
					</view> 
				</view>
				<view class="good-info" @click="navTo('/pages/scoreshop/good/show',{id:info.good_id})">
					<u-image width="200rpx" height="160rpx" mode="aspectFill" :src="info.good_image"></u-image>
					<view class="info">
						<view class="title">{{info.good_title}}</view>
						<view class="bottom">
							<view class="score">{{info.good_score}}积分</view>
							<view class="number">×{{info.number}}</view>
						</view>
					</view>
				</view>
				<view class="cell"><view class="cell__tit">合计：</view><view class="cell__val">{{info.score}}积分</view></view>
				<view class="cell"><view class="cell__tit">兑换时间：</view><view class="cell__val">{{info.createtime_text}}</view></view>
				<view class="cell"><view class="cell__tit">订单号：</view><view class="cell__val">{{info.order_sn}}</view></view>
				
				<block v-if="info.note">
					<view class="cell"><view class="cell__tit">发货信息：</view></view>
					<view class="reply"><u-parse :html="info.note"></u-parse></view>
				</block>
			</view>
			<view class="u-padding-50">
				<u-button type="success" open-type="contact"><u-icon name="chat" class="u-m-r-20" size="36"></u-icon> 联系客服</u-button>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
			data() {
				return {
					info: null,
					isRender:false
				}
			},
			onLoad(options) {
				let that = this;
				this.$u.api.getScoreshopOrderDetail({id:options.id}).then(res=>{
					that.info = res.data;
					that.isRender = true;
				});
			},
			methods: {
				previewImage:function(i){
				    uni.previewImage({
				        urls: [this.info.good_image],
				        current:i
				    });
				},
				openLocation:function(){
					console.log('打开地图');
					uni.openLocation({
					            latitude: parseFloat(this.info.lat),
					            longitude: parseFloat(this.info.lng),
								name:this.info.labels,
								address:this.info.address,
					            success: function () {
					                console.log('openLocation success');
					            },fail:function(error){
									uni.showToast({
										title:error,
										duration:2000
										
									});
								}
					        });
				}
				
			},
			
		}
</script>

<style>
	page{
		
		background-color: #f4f4f4;
		padding-bottom: 30rpx;
	}
	.progress{
		background-color: #59ba9c;
		padding:50rpx 50rpx 150rpx 50rpx;
		font-size: 48rpx;
		color:#ffffff;
	}
	.section{
		margin:0 auto;
		width:calc(100% - 100rpx);
		border-radius: 20rpx;
		background-color: #ffffff;
		margin-top:-100rpx;
	}
	.receive-info{
		padding:30rpx;
		display: flex;
		align-items: center;
		border-bottom: 1rpx dashed #eeeeee;
		
	}
	.receive-info .icon{
		margin-right:30rpx;
	}
	.receive-info .info .title{
		font-size: 32rpx;
		font-weight: bold;
		
	}
	.receive-info .info .address{
		font-size: 28rpx;
		color:#999999;
		margin-top:10rpx
	}
	.images{
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		padding:30rpx;
	}
	.images .u-image{
		margin-right:10rpx;
		margin-bottom:10rpx;
	}
	.images .u-image:nth-child(3n){
		margin-right: 0;
	}
	.content{
		padding:0 30rpx 30rpx 30rpx;
	}
	.cell{
		padding:20rpx 30rpx;
		display: flex;
		align-items: center;
	}
	.cell .cell__tit{
		color:#777777;
		
	}
	.cell .cell__val{
		color:#444444;
	}
	.reply{
		padding:20rpx 30rpx;
	}
	
	
	.good-info {
		display: flex;
		align-items: center;
		border-bottom: 1rpx solid #eeeeee;
		padding: 30rpx;
	}
	
	.good-info .u-image {
		flex-shrink: 0;
		border-radius: 20rpx !important;
		overflow: hidden !important;
	}
	
	.good-info .info {
		padding-left: 20rpx;
	
	}
	
	.good-info .info .title {
		font-size: 32rpx;
		font-weight: 600;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	
	}
	
	.good-info .info .bottom {
		margin-top: 20rpx;
		color: #59ba9c;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	
	.good-info .info .bottom .number {
		font-size: 28rpx;
		margin-right: 10rpx;
	}
	
	.good-info .info .bottom .score {
		font-weight: bold;
		font-size: 32rpx;
		color: #59ba9c;
		display: flex;
		align-items: center;
	}
</style>
